<template>
	<div>
		<div class="home-banner-container">
			<b-carousel class="home-banner" controls indicators>
				<a class="home-banner-item" v-for="(item, index) in data.banners" :key="index" :href="item.url">
					<b-carousel-slide >
						<template #img>
							<img class="home-banner-item-image" :src="item.images" />
						</template>
					</b-carousel-slide>
				</a>
			</b-carousel>
		</div>
		<div class="home-newest-container">
			<div class="home-newest-title">新 品 推 荐</div>
			<div class="home-newest-content">
				<div class="home-goods-item" v-for="(item, index) in data.newest" :key="index" @click="showGoods(item.id)">
					<div class="home-goods-item-image">
						<img :src="item.image + '!150'" />
					</div>
					<div class="home-goods-item-info">
						<div class="home-goods-item-name">
							{{ item.name }}
						</div>
						<div class="home-goods-item-price">
							<small>￥</small> {{ item.price }}
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="home-hot-container">
			<div class="home-hot-title">热 门 推 荐</div>
			<div class="home-hot-content">
				<div class="home-goods-item" v-for="(item, index) in data.hot" :key="index" @click="showGoods(item.id)">
					<div class="home-goods-item-image">
						<img :src="item.image + '!150'" />
					</div>
					<div class="home-goods-item-info">
						<div class="home-goods-item-name">
							{{ item.name }}
						</div>
						<div class="home-goods-item-price">
							<small>￥</small> {{ item.price }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<GoodsDetails v-bind.sync="goods_panel" />
	</div>
</template>

<script>
	import GoodsDetails from './Public/GoodsDetails.vue'
	
	export default {
		inject: [
			'to_login',
			'refresh_token',
			'close_login',
			'reload_view'
		],
		components: {
			GoodsDetails
		},
		data(){
			return {
				data: {
					banners: [],
					hot: [],
					newest: []
				},
				goods_panel: {
					show: false,
					id: null
				}
			}
		},
		mounted() {
			this.fetch_banners()
			this.fetch_hot()
			this.fetch_newest()
		},
		methods: {
			fetch_banners() {
				this.$axios.get('/home/banners').then(resp => {
					if(resp.ret == 0) this.data.banners = resp.data
				})
			},
			fetch_hot() {
				this.$axios.get('/home/hot_goods').then(resp => {
					if(resp.ret == 0) this.data.hot = resp.data
				})
			},
			fetch_newest() {
				this.$axios.get('/home/newest_goods').then(resp => {
					if(resp.ret == 0) this.data.newest = resp.data
				})
			},
			showGoods(id) {
				this.goods_panel = {
					show: true,
					id: id
				}
			}
		}
	}
</script>

<style>
	.title {
		background: linear-gradient(to right, #a5e4ff, rgb(81, 179, 249));
		-webkit-background-clip: text;
		color: transparent;
	}
	
	.home-banner-item-image {
		width: 100%;
	}
	
	.home-banner-container {
		margin-bottom: 0.9375rem;
	}
	
	.home-newest-container, .home-hot-container {
		width: 100%;
		margin-bottom: 0.9375rem;
		background-color: #fff;
	}
	.home-newest-title, .home-hot-title {
		text-align: center;
		padding: 10px 0;
		color: #666;
		user-select: none;
	}
	
	.home-newest-content, .home-hot-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		overflow-x: auto;
		box-sizing: border-box;
	}
	
	.home-goods-item {
		display: inline-block;
		margin: 0.9375rem;
		width: 9.375rem;
		user-select: none;
		cursor: pointer;
	}
	.home-goods-item-image {
		width: 9.375rem;
		height: 9.375rem;
		margin-bottom: 0.3125rem;
	}
	..home-goods-item-image img {
		-webkit-user-drag: none;
	}
	.home-goods-item-name {
		overflow-x: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 1.125rem;
		margin-bottom: 0.3125rem;
	}
	.home-goods-item-price {
		font-size: 1.5625rem;
		color: rgb(255, 78, 47)
	}
</style>
